<template>
  <!-- 颜色版组件 -->
  <div class="color-picker">
    <!-- 自定义按钮 -->
    <div class="custom-button-container" @click="togglePanel">
      自定义
      <!-- <button class="custom-button" @click="togglePanel">
        自定义颜色
      </button> -->
    </div>

    <!-- 颜色选择面板 -->
    <div class="color-panel" v-if="isOpen" @click.stop>
      <!-- 当前选中颜色预览 -->
      <div class="current-color-preview">
        <div
          class="color-display"
          :style="{ backgroundColor: currentColor }"
        ></div>
        <span class="color-code">{{ currentColor }}</span>
      </div>

      <!-- 预设颜色 -->
      <div class="preset-colors">
        <div
          v-for="(color, index) in presetColors"
          :key="index"
          class="preset-color"
          :style="{ backgroundColor: color }"
          @click="selectColor(color)"
          :title="color"
        ></div>
      </div>

      <!-- 自定义颜色输入 -->
      <div class="custom-color-input">
        <input
          type="text"
          v-model="customColorInput"
          placeholder="输入颜色代码"
          @keyup.enter="confirmCustomColor"
          :class="{ invalid: isInvalidColor }"
        />
        <button @click="confirmCustomColor">应用</button>
      </div>

      <!-- 透明度控制 -->
      <div class="opacity-control" v-if="enableOpacity">
        <label>透明度: {{ opacity }}%</label>
        <input
          type="range"
          min="0"
          max="100"
          v-model="opacity"
          @input="updateColorWithOpacity"
        />
      </div>

      <!-- 错误提示 -->
      <p class="error-message" v-if="isInvalidColor">
        无效的颜色格式，请使用#rrggbb、rgb()或颜色名称
      </p>

      <!-- 关闭按钮 -->
      <div class="panel-actions">
        <button class="close-button" @click="closePanel">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ColorPicker",
  props: {
    // 绑定的颜色值
    value: {
      type: String,
      default: "#ffffff",
    },
    // 是否启用透明度调节
    enableOpacity: {
      type: Boolean,
      default: true,
    },
    // 预设颜色列表
    presetColors: {
      type: Array,
      default: () => [
        "#000000",
        "#ffffff",
        "#ff0000",
        "#00ff00",
        "#0000ff",
        "#ffff00",
        "#ff00ff",
        "#00ffff",
        "#ff9900",
        "#9900ff",
        "#0099ff",
        "#99ff00",
        "#ff0099",
        "#00ff99",
        "#333333",
        "#666666",
        "#999999",
        "#cccccc",
        "#eeeeee",
      ],
    },
  },
  data() {
    return {
      isOpen: false, // 面板是否展开
      currentColor: this.value, // 当前选中的颜色
      customColorInput: this.value, // 自定义颜色输入框
      opacity: 100, // 透明度值
      isInvalidColor: false, // 是否为无效颜色
    };
  },
  watch: {
    // 监听父组件传入的value变化
    value(newVal) {
      this.currentColor = newVal;
      this.customColorInput = newVal;
      this.extractOpacity(newVal);
    },
  },
  methods: {
    // 切换面板显示状态
    togglePanel() {
      this.isOpen = !this.isOpen;
    },

    // 关闭面板
    closePanel() {
      this.isOpen = false;
    },

    // 选择预设颜色
    selectColor(color) {
      this.currentColor = this.applyOpacity(color);
      this.customColorInput = this.currentColor;
      this.isInvalidColor = false;
      this.emitColorChange();
    },

    // 确认自定义颜色
    confirmCustomColor() {
      if (this.isValidColor(this.customColorInput)) {
        this.currentColor = this.applyOpacity(this.customColorInput);
        this.isInvalidColor = false;
        this.$emit("change", this.currentColor,true);
      } else {
        this.isInvalidColor = true;
      }
      this.isOpen = false
      
    },

    // 验证颜色是否有效
    isValidColor(color) {
      const tempDiv = document.createElement("div");
      tempDiv.style.color = color;
      return tempDiv.style.color !== "";
    },

    // 提取透明度值
    extractOpacity(color) {
      if (color.includes("rgba")) {
        const match = color.match(
          /rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/
        );
        if (match && match[1]) {
          this.opacity = Math.round(parseFloat(match[1]) * 100);
        }
      }
    },

    // 更新透明度并应用到颜色
    updateColorWithOpacity() {
      this.currentColor = this.applyOpacity(
        this.customColorInput || this.currentColor
      );
      this.emitColorChange();
    },

    // 应用透明度到颜色
    applyOpacity(color) {
      if (!this.enableOpacity || this.opacity === 100) return color;

      // 处理十六进制颜色
      if (color.startsWith("#")) {
        return this.hexToRgba(color, this.opacity / 100);
      }

      // 处理RGB颜色
      if (color.startsWith("rgb(") && !color.startsWith("rgba(")) {
        return color.replace("rgb(", "rgba(") + `, ${this.opacity / 100})`;
      }

      // 处理RGBA颜色
      if (color.startsWith("rgba(")) {
        return color.replace(
          /(rgba\([^,]+,[^,]+,[^,]+),[^)]+\)/,
          `$1, ${this.opacity / 100})`
        );
      }

      // 处理颜色名称
      return this.colorNameToRgba(color, this.opacity / 100);
    },

    // 十六进制转RGBA
    hexToRgba(hex, alpha) {
      // 处理简写形式如 #fff
      if (hex.length === 4) {
        hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
      }

      const r = parseInt(hex.slice(1, 3), 16);
      const g = parseInt(hex.slice(3, 5), 16);
      const b = parseInt(hex.slice(5, 7), 16);

      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    },

    // 颜色名称转RGBA
    colorNameToRgba(colorName, alpha) {
      const tempDiv = document.createElement("div");
      tempDiv.style.color = colorName;
      const rgb = tempDiv.style.color;

      if (rgb.startsWith("rgb(")) {
        return rgb.replace("rgb(", "rgba(") + `, ${alpha})`;
      }

      return colorName;
    },

    // 触发颜色变化事件
    emitColorChange() {
      this.$emit("input", this.currentColor);
      this.$emit("change", this.currentColor);
    },
  },
};
</script>

<style scoped>
.color-picker {
  display: inline-block;
  position: relative;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* 自定义按钮样式 */
.custom-button-container {
  display: inline-block;
  color: #348cf8;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}
.custom-button-container:hover {
  background-color: #ebe9e9;
  padding: 5px 10px;
}

.custom-button {
  padding: 8px 20px;
  background-color: #348cf8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.custom-button:hover {
  background-color: #297ae3;
}

/* 颜色面板样式 */
.color-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 280px;
  z-index: 100;
}

/* 当前颜色预览 */
.current-color-preview {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.color-display {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  margin-right: 10px;
  border: 2px solid #eee;
}

.color-code {
  font-size: 14px;
  color: #333;
  font-family: monospace;
}

/* 预设颜色样式 */
.preset-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.preset-color {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.15s ease;
  border: 1px solid #f0f0f0;
}

.preset-color:hover {
  transform: scale(1.1);
}

/* 自定义颜色输入样式 */
.custom-color-input {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.custom-color-input input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
}

.custom-color-input input.invalid {
  border-color: #ff4444;
  background-color: rgba(255, 68, 68, 0.05);
}

.custom-color-input button {
  padding: 6px 12px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.custom-color-input button:hover {
  background-color: #3367d6;
}

/* 透明度控制样式 */
.opacity-control {
  margin-bottom: 10px;
}

.opacity-control label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: #666;
}

.opacity-control input {
  width: 100%;
  cursor: pointer;
}

/* 错误提示样式 */
.error-message {
  margin: 0;
  font-size: 12px;
  color: #ff4444;
  padding-top: 5px;
}

/* 面板操作按钮 */
.panel-actions {
  margin-top: 15px;
  text-align: right;
}

.close-button {
  padding: 6px 15px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s;
}

.close-button:hover {
  background-color: #e8e8e8;
}
</style>
